<template>
  <div class="page">
    <h3>设置</h3>
    <div style="background: pink" class="logo">
      <el-upload
        class="wallpaper-uploader"
        action="http://localhost:8000/file/upload/avatar"
        :show-file-list="false"
        :before-upload="setWallpaper">
        <img class="wallpaper" :src="user.wallpaper"  v-if="user.wallpaper" title="点击更换背景">
      </el-upload>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8000/file/upload/avatar"
        :show-file-list="false"
        :before-upload="setAvatar">
        <img v-if="user.avatar" :src="user.avatar" class="avatar" title="点击更换头像">
      </el-upload>
      <h2>{{user.user_name}}</h2>
    </div>
    <el-form ref="form" label-width="80px" class="form">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="个性签名">
        <el-input v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="学校">
        <el-input v-model="form.school"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="推送信息" style="text-align:left">
        <el-radio v-model="form.accept" label="true">接受</el-radio>
        <el-radio v-model="form.accept" label="false">拒绝</el-radio>
      </el-form-item>
      <div style="text-align: center">
        <el-button type="primary" @click="Save">保存</el-button>
        <el-button @click="Init">重置</el-button>
      </div>
    </el-form>
    <router-link to="/container/SecurityCenter"><h3>修改密码</h3></router-link>
    <!--<h3 @click="Init">朋友</h3>-->
    <!--{{user.wallpaper}}
    <h3>群组</h3>
    <h3>我的发布</h3>-->

  </div>

</template>
<script>
  /* eslint-disable spaced-comment,comma-dangle */

  import { UserInfoReadMyself, UserInfoUpdate, getImageUrl } from '../../public/api'
  import { Upload } from '../../public/util'

  export default {
    data () {
      return {
        form: {
          name: '',
          phone: '',
          address: '',
          desc: '',
          birthday: '',
          accept: '1'
        },
        user: {
          user_name: '',
          avatar: '',
          wallpaper: ''
        }
      }
    },
    watch: {
      User_id (curVal, oldVal) {
        this.Init()
      }
    },
    created () {
      this.Init()
    },
    computed: {
      getUrl () {
        return this.$store.state.url
      },
      User_id () {
        return this.$store.state.user_id
      }
    },
    methods: {
      getImageUrl: getImageUrl,
      Save () {
        UserInfoUpdate(
          {
            school: this.form.school,
            class: this.form.desc,
            grade: '',
            name: this.form.name,
            phone: this.form.phone,
            province: '',
            city: this.user.wallpaper,
            country: '',
            detail_address: this.form.address,
            avatar: this.user.avatar,
            wallpaper: '',
            birthday: typeof (this.form.birthday) === 'string' ? '' : this.form.birthday.getTime(),
            recommend: this.form.accept === 'true' ? 1 : 0
          }
        ).then(
          data => {
            if (data.status) {
              this.$message.success('成功')
            }
          }
        ).catch()
      },
      Init () {
        UserInfoReadMyself().then(
          data => {
            var content = data.data
            this.user.avatar = content.avatar
            this.user.user_name = content.name
            this.form.name = content.name
            this.form.phone = content.phone
            this.form.address = content.detail_address
            this.form.school = content.school
            this.form.desc = content.class
            this.user.wallpaper = content.city
            this.form.birthday = new Date(Number(content.country))
            this.form.accept = content.user_setting.recommend === 1 ? 'true' : 'false'
          }
        ).catch()
      },
      setAvatar (file) {
        var _this = this
        Upload(file, 'user/avatar', function (x) {
          _this.user.avatar = getImageUrl(x)
        })
        return false
      },
      setWallpaper (file) {
        var _this = this
        Upload(file, 'user/wallpaper', function (x) {
          _this.user.wallpaper = getImageUrl(x)
        })
        return false
      }
    }
  }
</script>
<style scoped>
  .logo {
    height: 300px;
    width: 700px;
    margin: 0 auto;
  }

  h3 {
    z-index: 2;
    position: relative;
  }

  .page > div {
    background: white;
  }

  h3:before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 3px;
    top: 13px;
    z-index: 1;
  }

  .form {
    background: white;
    width: 500px;
    margin: 20px auto 0;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.27);

  }

  .logo .avatar {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.27);
  }

  .logo h2 {
    /*background: #fff;*/
    color: white;
    text-shadow: 0 2px 10px black;
  }

  .logo .wallpaper-uploader, .wallpaper {
    width: 100%;
    height: 300px;
  }

  .wallpaper-uploader {
    width: 100%;
    height: 300px;
  }

  .avatar-uploader {
    margin-top: -175px;
  }
</style>
